📒 Notes for Lecture 08: Block vs Inline & Form Quiz
-
Block vs Inline Elements:
<p>,<div>,<main>are block elements (start on a new line, take full width).<a>,<span>,<abbr>are inline elements (remain in flow with surrounding text).<img>,<label>,<input>default to inline.
-
HTML Example (
index.html): Displays paragraphs, links, block vs inline, image, form label/input, and<main>. -
Form Validation Quiz (
quiz.html):- Uses
<form method="post">with inputs for name, email (pattern-check), city (alphabet-only), pincode (6 digits). - Button:
<button type="submit">Submit</button>.
- Uses
-
Comprehensive List of Elements (
Comprehensive List.txt): A reference of block vs inline tags (full list shown below). -
CSS Styling (
style.css): Background colors applied to various elements (paragraphs, links, divs, spans, abbr, etc.).
Hinglish: Lecture 08 mein humne “block” aur “inline” elements ka difference dekha.
Block elements jaise <div> new line se start hote hain aur pura width lete
hain;
inline elements jaise <a>, <span> text ke flow mein hi
rehte hain.
Phir ek form quiz banaya jismein inputs pe required aur pattern se
validation ki.
Aur sab elements ke liye alag background colors set kiye CSS file mein.
💻 Live Code Preview – Block vs Inline
If the iframe doesn’t load, click here to open Block vs Inline Demo in a new tab.
💻 Live Code Preview – Form Quiz
If the iframe doesn’t load, click here to open Form Quiz Demo in a new tab.
📄 Comprehensive List of HTML Elements
Block Elements (Most Commonly Used First)
<div>: A generic container for flow content.
<p>: Paragraph.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Headings.
<ul>: Unordered list.
<ol>: Ordered list.
<li>: List item.
<form>: A section containing form controls.
<table>: Table.
<section>: A standalone section of a document.
<header>: A container for introductory content or a set of navigational links.
<footer>: Footer of a section or page.
<nav>: A section of a page that contains navigation links.
<article>: A self-contained composition in a document.
<aside>: A section of a page that contains information indirectly related to the main content.
<main>: The main content of a document.
<fieldset>: A set of form controls grouped under a common name.
<blockquote>: A block of text that is a quotation from another source.
<pre>: Preformatted text.
<canvas>: A container used to draw graphics via JavaScript.
<dl>: Description list.
<dt>: Term in a description list.
<dd>: Description in a description list.
<figure>: Any content that is referenced from the main content.
<figcaption>: A caption for a <figure> element.
<address>: Contact information for the author or owner of the document.
<hr>: A thematic break or a horizontal rule.
<tfoot>: Footer of a table.
Inline Elements (Most Commonly Used First)
<a>: Anchor or hyperlink.
<img>: Image.
<span>: Generic inline container.
<input>: Input field.
<label>: Label for a form element.
<strong>: Strong emphasis.
<em>: Emphasized text.
<br>: Line break.
<code>: Code snippet.
<b>: Bold text.
<i>: Italic text.
<u>: Underlined text.
<small>: Smaller text.
<sub>: Subscript.
<sup>: Superscript.
<mark>: Marked or highlighted text.
<q>: Short inline quotation.
<cite>: Citation.
<kbd>: Keyboard input.
<samp>: Sample output.
<var>: Variable in a mathematical expression or programming context.
<time>: Time.
<abbr>: Abbreviation.
<data>: Machine-readable translation of content.
<acronym>: Acronym (Not supported in HTML5).